<template>
  <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :footer="null"
      cancelText="关闭">

    <table id="table_report" class="table table-striped table-bordered table-hover">

      <tr>
        <td style="width:90px;text-align: right;padding-top: 80px;">基本信息:</td>
        <td>
          <p style="float: left;">


            车牌号：<span id="plateNo">
           {{ result.plateNo }}
                    </span><br>


            停车场编号：<span id="parkCode">
           {{ result.parkCode }}
                    </span><br>


            停车场名称：<span id="parkName">
           {{ result.parkName }}
                    </span><br>


            是否是白名单：<span id="licenseType">
           {{ result.licenseType }}
                    </span><br>


            <span id="startTime" v-show="result.startTime">
           起始时间：{{ result.startTime }}
                    </span><br v-show="result.startTime">


            <span id="endTime" v-show="result.endTime">
           过期时间：{{ result.endTime }}
                    </span><br v-show="result.endTime">


            <!--            车辆类型配置id：<span id="carTypeId">
                       {{ result.carTypeId }}
                                </span><br>-->


            客户姓名：<span id="userName">
           {{ result.userName }}
                    </span><br>


            客户手机号码：<span id="mobile">
           {{ result.mobile }}
                    </span><br>


            <span id="parkNumber" v-show="result.licenseType===1">
            车位编号：{{ result.parkNumber }}
                    </span><br v-show="result.licenseType===1">


            <span id="isMulti" v-show="result.licenseType===1">
           是否是一位多车：{{ result.isMulti }}
                    </span><br v-show="result.licenseType===1">


            <span id="payFee" v-show="result.payFee">
           支付费用(元):{{ result.payFee }}
                    </span><br v-show="result.payFee">


            <span id="carDeposit" v-show="result.carDeposit">
           车辆押金(元):{{ result.carDeposit }}
                    </span><br v-show="result.carDeposit">


            家庭住址：<span id="address">
           {{ result.address }}
                    </span><br>

            车辆备注：<span id="remark">
           {{ result.remark }}
                    </span><br>

            创建人：<span id="createUser">
           {{ result.createUser }}
                    </span><br>


            修改人：<span id="updateUser">
           {{ result.updateUser }}
                    </span><br>


            修改时间：<span id="updateTime">
           {{ result.updateTime }}
                    </span><br>


            创建时间：<span id="createTime">
           {{ result.createTime }}
                    </span><br>
          </p>
        </td>
      </tr>
      <td style="text-align: center;" colspan="10">
        <a-button type="primary" @click="close">关闭</a-button>
      </td>
    </table>
  </a-modal>
</template>

<script>
import {httpAction} from '@api/manage'

export default {
  name: "ParkWhiteEditListModal",
  data() {
    return {
      title: "详情",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      result: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: "/parkWhiteEdit/parkWhiteEditList/add",
        edit: "/parkWhiteEdit/parkWhiteEditList/edit",
      },
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.result = this.translate(record)
      this.visible = true;
    },
    translate(record){
      let result = {}
      Object.assign(result,record)
      if(record.licenseType === 1)
      {
        result.licenseType = '白名单'
      }
      if(record.licenseType === 2)
      {
        result.licenseType = '黑名单'
      }
      if(record.licenseType === 3)
      {
        result.licenseType = '储值车'
      }
      if(record.status==='Y')
      {
        result.status = '启用'
      }
      else {
        result.status = '未启用'
      }
      if(record.isMulti==='Y')
      {
        result.isMulti ='是'
      }
      else {
        result.isMulti = '否'
      }
      return result
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          formData.startTime = formData.startTime ? formData.startTime.format('YYYY-MM-DD HH:mm:ss') : null;
          formData.endTime = formData.endTime ? formData.endTime.format('YYYY-MM-DD HH:mm:ss') : null;
          formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null;

          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },


  }
}
</script>

<style lang="less" scoped>

</style>
